<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,idx) in menu" :key="idx" @mouseenter="enter">
        <i :class="item.type"></i>
        {{item.name}}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="kind" @mouseenter="sover" @mouseleave="sout">
      <!-- vue的模块循环template-->
      <template v-for="(item,idx) in curdetail.children">
        <h4 :key="idx">{{item.title}}</h4>
        <span v-for="v in item.children" :key="v">{{v}}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind:'',//鼠标hover的类型内容
      //这里的菜单，主菜单和detail弹层是兄弟关系，hover的时候，改变detail弹层的内容，而不是采用父子结构，每一个菜单下一个隐藏的detail，这样会导致DOM节点比较复杂。
      //数据结构可以复杂一点，dom结构尽可能简单
      menu: [
        {
          type: "food",
          name: "美食",
          children:[
            {
              title:'美食',
              children:[
                '代金券','甜点饮品','火锅','自助餐','小吃快餐'
              ]
            }
          ]
        },
        {
          type:'takeout',
          name:"外卖",
          children:[
            {
              title:'外卖',
              children:[
                '美团外卖'
              ]
            }
          ] 
        },
        {
          type:'hotel',
          name:'酒店',
          children:[
            {
              title:'酒店星级',
              children:[
                '经济型','舒适/三星','高档/四星'
              ]
            }
          ]
        },
        {
          type:'hotel',
          name:'酒店'
        }
      ]
    };
  },
  components: {},
  computed:{
    curdetail:function(){
      return this.menu.filter(item=>item.type===this.kind)[0];
    }
  },
  methods:{
    mouseleave(){
       let self=this;
       //加一个延迟效果。
       self._timer=setTimeout(function(){
         self.kind=''; 
       },150)
    },
    enter(e){
       this.kind=e.target.querySelector('i').className;
    },
    sover(){
      //判断鼠标是否进入detail弹层
      clearTimeout(this._timer);//在150ms没，如果鼠标移入detail弹层，那么不把this.kind清空，timer清空掉。这里是防止鼠标不能移入detail弹层。因为DOM是并列结构而不是父子结构
    },
    sout(){
      this.kind="";//当鼠标从detail弹层移走，那么让this.kind为"",弹层消失。
    }
  }
};
</script>

<style lang="scss">
</style>
